<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>修改密码 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
    <link rel="stylesheet" href="../lib/Font-Awesome-6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #1E9FFF;
            --secondary-color: #009688;
            --accent-color: #5FB878;
            --success-color: #5FB878;
            --error-color: #FF5722;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #f6f9fc, #eef2f7);
            background-attachment: fixed;
            padding: 20px;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        .password-card {
            position: relative;
            width: 100%;
            max-width: 480px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transform: translateY(0);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            border: 1px solid #e6e6e6;
        }

        .password-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 28px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .card-header h1 {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
            position: relative;
            z-index: 2;
        }

        .card-header p {
            font-size: 0.95rem;
            opacity: 0.95;
            max-width: 350px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .card-body {
            padding: 30px;
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            z-index: 2;
            font-size: 18px;
        }

        .layui-input {
            padding-left: 40px !important;
            height: 46px;
            line-height: 46px;
            border-radius: 6px;
            border: 1px solid #e6e6e6;
            transition: all 0.3s;
        }

        .layui-input:focus {
            border-color: var(--primary-color) !important;
            box-shadow: 0 0 8px rgba(30, 159, 255, 0.2);
        }

        .password-toggle {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #999;
            font-size: 18px;
            z-index: 2;
        }

        .password-toggle:hover {
            color: var(--primary-color);
        }

        .password-strength {
            display: flex;
            gap: 5px;
            margin-top: 8px;
            height: 5px;
        }

        .password-strength span {
            flex: 1;
            border-radius: 2px;
            background-color: #f0f0f0;
            transition: background-color 0.3s;
        }

        .password-tips {
            font-size: 13px;
            color: #999;
            margin-top: 5px;
        }

        .form-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .form-title i {
            margin-right: 8px;
            color: var(--primary-color);
        }

        .layui-form-item {
            margin-bottom: 22px;
        }

        .option-link {
            display: block;
            text-align: center;
            color: var(--primary-color);
            text-decoration: none;
            margin-top: 15px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .option-link:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        .btn-submit {
            display: block;
            width: 100%;
            height: 46px;
            line-height: 46px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            font-size: 16px;
            font-weight: 500;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 20px;
            box-shadow: 0 4px 10px rgba(30, 159, 255, 0.25);
        }

        .btn-submit:hover {
            opacity: 0.95;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(30, 159, 255, 0.3);
        }

        .success-overlay {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            z-index: 10;
            border-radius: 8px;
            text-align: center;
            padding: 40px 30px;
        }

        .success-content i {
            font-size: 60px;
            color: var(--accent-color);
            margin-bottom: 20px;
        }

        .success-content h3 {
            font-size: 22px;
            color: #333;
            margin-bottom: 15px;
        }

        .success-content p {
            color: #666;
            margin-bottom: 25px;
            font-size: 15px;
        }

        .security-icon {
            text-align: center;
            margin-bottom: 20px;
        }

        .security-icon i {
            font-size: 56px;
            color: var(--primary-color);
            background: rgba(30, 159, 255, 0.1);
            width: 100px;
            height: 100px;
            line-height: 100px;
            border-radius: 50%;
            display: inline-block;
        }

        @media (max-width: 600px) {
            body {
                padding: 15px;
            }

            .card-body {
                padding: 25px 20px;
            }

            .card-header {
                padding: 20px 15px;
            }

            .card-header h1 {
                font-size: 1.6rem;
            }
        }
    </style>
</head>
<body>
<div class="password-card">
    <div class="card-header">
        <h1>修改密码</h1>
        <p>请验证原密码后设置新密码</p>
    </div>

    <div class="card-body">
        <div class="security-icon">
            <i class="fas fa-user-shield"></i>
        </div>

        <form class="layui-form" id="resetForm">
            <div class="form-title">
                <i class="fas fa-key"></i> 身份验证
            </div>

            <div class="layui-form-item" style="position: relative;">
                <div class="input-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <input type="password" name="oldPassword" lay-verify="required" placeholder="请输入当前密码" autocomplete="off" class="layui-input">
                <span class="password-toggle" data-target="oldPassword">
                    <i class="fas fa-eye"></i>
                </span>
            </div>

            <div class="form-title">
                <i class="fas fa-redo"></i> 设置新密码
            </div>

            <div class="layui-form-item" style="position: relative;">
                <div class="input-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <input type="password" name="newPassword" id="newPassword" lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
                <span class="password-toggle" data-target="newPassword">
                    <i class="fas fa-eye"></i>
                </span>
            </div>
            <div class="password-tips">建议使用字母、数字和符号组合</div>
            <div class="password-strength">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

            <div class="layui-form-item" style="position: relative;">
                <div class="input-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <input type="password" name="confirmPassword" lay-verify="required" placeholder="请确认新密码" autocomplete="off" class="layui-input">
                <span class="password-toggle" data-target="confirmPassword">
                    <i class="fas fa-eye"></i>
                </span>
            </div>

            <button class="btn-submit" type="button" id="submitBtn">
                <i class="fas fa-check-circle"></i> 确认修改
            </button>
        </form>

        <!-- 成功提示层 -->
        <div class="success-overlay" id="successOverlay">
            <div class="success-content">
                <i class="fas fa-shield-alt"></i>
                <h3>密码修改成功！</h3>
                <p>您已成功更新账户密码，建议定期更换密码以保障账户安全</p>
                <button class="layui-btn layui-btn-normal" style="padding: 0 30px; height: 38px;" id="closeSuccess">完成</button>
            </div>
        </div>
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    layui.use(['form'], function(){
        $.ajaxSetup({
            beforeSend: function(xhr) {
                const data = JSON.parse(localStorage.getItem('user'));
                if (data && data.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
                }
            }
        });

        // 密码显示/隐藏功能
        $('.password-toggle').on('click', function(){
            var target = $(this).data('target');
            var input = $('input[name="' + target + '"]');
            var type = input.attr('type') === 'password' ? 'text' : 'password';
            var icon = $(this).find('i');

            input.attr('type', type);
            if(type === 'text') {
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
                $(this).addClass('active');
            } else {
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
                $(this).removeClass('active');
            }
        });

        // 密码强度检测
        $('#newPassword').on('input', function(){
            var password = $(this).val();
            var strength = 0;
            var spans = $('.password-strength span');

            // 重置样式
            spans.css('backgroundColor', '#f0f0f0');

            if(password.length === 0) return;

            // 长度检查
            if (password.length >= 8) strength++;
            // 大写字母检查
            if (/[A-Z]/.test(password)) strength++;
            // 数字检查
            if (/[0-9]/.test(password)) strength++;
            // 特殊字符检查
            if (/[^A-Za-z0-9]/.test(password)) strength++;

            // 更新UI
            for(var i = 0; i < strength; i++) {
                spans.eq(i).css('backgroundColor',
                    strength < 2 ? '#FF5722' :
                        strength < 3 ? '#FFB800' : '#5FB878');
            }
        });

        // 提交按钮
        $('#submitBtn').on('click', function(){
            var oldPassword = $('input[name="oldPassword"]').val().trim();
            var newPassword = $('input[name="newPassword"]').val().trim();
            var confirmPassword = $('input[name="confirmPassword"]').val().trim();

            // 基本验证
            if(!oldPassword) {
                layer.msg('请输入当前密码', {icon: 2});
                return;
            }

            if(!newPassword) {
                layer.msg('请输入新密码', {icon: 2});
                return;
            }

            if(newPassword.length < 8) {
                layer.msg('密码长度至少为8个字符', {icon: 2});
                return;
            }

            if(newPassword !== confirmPassword) {
                layer.msg('两次输入的密码不一致', {icon: 2});
                return;
            }

            // 显示加载状态
            var btn = $(this);
            var originalHtml = btn.html();
            btn.html('<i class="fas fa-spinner fa-spin"></i> 验证中...').prop('disabled', true);

            // 从 localStorage 中取出整个用户对象
            const userStr = localStorage.getItem('user');
            // 转换为 JS 对象
            const user = JSON.parse(userStr);
            var username = user.user.username;

            $.ajax({
                url: '/user/change-password',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    username: username, // 可从前端获取或者从 localStorage 中读取
                    oldPassword: oldPassword,
                    newPassword: newPassword
                }),
                success: function(response) {
                    if (response.code === 200) {
                        $('#successOverlay').fadeIn();
                        btn.html(originalHtml).prop('disabled', false);
                        $('input[name="newPassword"]').val('');
                        $('input[name="confirmPassword"]').val('');
                        $('.password-strength span').css('backgroundColor', '#f0f0f0');
                    } else {
                        layer.msg(response.message || '密码修改失败', {icon: 2});
                        btn.html(originalHtml).prop('disabled', false);
                    }
                },
                error: function(xhr, status, error) {
                    layer.msg('请求失败，请稍后再试', {icon: 2});
                    btn.html(originalHtml).prop('disabled', false);
                }
            });
        });

        // 关闭成功提示
        $('#closeSuccess').on('click', function(){
            $('#successOverlay').fadeOut();
        });
    });
</script>
</body>
</html>